<!--
 * @Description: 订单详情页面
 * @Version: 1.0
 * @Autor: Yuanjy
 * @Date: 2020-04-01 21:55:29
 * @LastEditors: 任飞
 * @LastEditTime: 2020-06-20 16:53:59
 -->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="订单号"><el-input v-model="form.name"/></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="订单日期"><el-input v-model="form.name"/></el-form-item></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="客户姓名"><el-input v-model="form.name"/></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="客户手机号"><el-input v-model="form.name"/></el-form-item></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="订单金额"><el-input v-model="form.name"/></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="订单状态"><el-input v-model="form.name"/></el-form-item></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="销售人员"><el-input v-model="form.name"/></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="所属公司"><el-input v-model="form.name"/></el-form-item></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="客户获得积分"><el-input v-model="form.name"/></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="客户抵扣积分"><el-input v-model="form.name"/></el-form-item></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="优惠金额"><el-input v-model="form.name"/></el-form-item></el-col>
      </el-row>
    </el-form>
    <el-table v-loading="loading" ref="table" :data="tableData" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column prop="alias" label="商品编号" />
      <el-table-column prop="alias" label="商品名称" />
      <el-table-column prop="alias" label="规格" />
      <el-table-column prop="alias" label="型号" />
      <el-table-column prop="alias" label="单价" />
      <el-table-column prop="alias" label="数量" />
      <el-table-column prop="alias" label="图片" />
    </el-table>
  </div>
</template>

<script>

export default {
  components: { },
  data() {
    return {
      tableData: [{
        alias: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      form: {
        name: ''
      }
    }
  },
  mounted() {
  
  },
  methods() {

  },
  beforeRouteLeave(to, from, next) {
    if (to.path === "/order/list") {
      to.meta.keepAlive = true
    }
    console.log(to, from)
    next()
  }
}
</script>

<style scoped>
  .app-container {
    font-size: 14px;
  }
  .top-block {
    overflow: hidden;
  }
  .mid-block {
    border: 1px solid #bbb;
    padding: 5px 10px;
    overflow: hidden;
  }
  .mid-box {
    float: left;
    width: 33.3%;
    line-height: 40px;
  }
  .user-top {
    line-height: 26px;
  }
  .topnav_box:hover {
    overflow-y: scroll;
  }
</style>
